<template lang="pug">
.menuscenic-dialog-contents(v-if="dialogVisible")
  //- 关闭按钮
  .menuscenic-close(@click="close")
    van-icon(name="cross" color="#fff" size="26")
  .menuscenic-tab
    //- 图片
    .menuscenic-img(v-if="img")
      img(:src="img")
    //- 标题
    .menuscenic-title(v-if="title") {{title}}
    //- 多功能信息
    .menuscenic-mutil.mgt4(v-if="typeModel == 1")
      template(v-if='tabData && tabData.length === 1')
        .mgt2
          .fc-w3.jc-center
            .box-sizing.pdb1.fs-l.strong {{tabData[0].title}}
          .jc-center.mgb4
            .w100(style='height: 2px;background: #409eff;')
          .menu-text-html(v-for="(item, ix) in tabData[0].newData" :key="ix")
            template(v-if="item.type == 1")
              .menu-image-text.menu-colorf(v-html="item.contents")

            .jc-between.box-sizing.pdy2(v-if="item.type == 2")
              .fc-w3.flex-1.box-sizing.pdl2.ai-center(style='border-left: 2px solid #409eff;') 联系方式
              .ff-rn.ai-center(@click="jumpTel(item)")
                img(src='static/images/vrtour/phone.png' alt='' style='height: 15px;')
                .menu-colorf.mgl1.menu-pointer {{item.contents}}

            .jc-between.box-sizing.pdy2(v-if="item.type == 3")
              .fc-w3.box-sizing.pdl2.ai-center.w50(style='border-left: 2px solid #409eff;') 地址
              .flex-1.ff-rn.jc-end(@click="jumpMap(item)")
                .mgb0.ff-rn
                  img(src='static/images/vrtour/dingwei.png' alt='' style='height: 15px;width: 10px;display: inline-block;')
                  .menu-colorf.mgl1.menu-pointer {{item.contents}}

            .menu-weixin(v-if="item.type == 4")
              .mgt2
                img(:src="item.contents" style="height: 120px;")
              .fc-w3.mgt2.mgb2.tac 微信二维码

            .menu-audio(v-if="item.type == 5")
              p.menu-color9.mgt2.mgb2 音频
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              .menu-audio-url.menu-center
                audio(ref="audioControl" :src="item.fullaudio", :autoplay="item.isPlay", loop, controls style="width: 100%;max-width: 500px;")
            .menu-video(v-if="item.type == 6")
              p.menu-color9.mgt2.mgb2 视频
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              .menu-video-url.menu-center
                video(
                  ref="videoWrap",
                  loop,
                  preload,
                  :autoplay="item.isPlay",
                  controls,
                  webkit-playsinline='true',
                  playsinline='true',
                  x5-playsinline="true",
                  :src="item.fullvideo",
                  style="background-color: #444;width: 100%;max-width: 800px;")

            .menu-url(v-if="item.type == 7")
              p.menu-color9.mgt2.mgb2 链接
              p
                van-icon.menu-colorf(name="gem-o")
                span.menu-colorf.mgl2.menu-pointer(@click="jumpUrl(item.contents)") {{item.contents}}
            .menu-360huanwu.w100p(v-if="item.type == 8")
              p.menu-color9.mgt2.mgb2 物品3D
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              iframe.frame-360huanwu(frameborder="0", scrolling="yes", :src="item.previewurl", :style="`width: 100%;min-height: ${isPc ? '550px': '450px'};`")

      el-tabs(v-model="activeName" v-else)
        el-tab-pane(v-for="(tab, index) in tabData" :label="tab.title" :key="index" :name="String(index)")
          .menu-text-html(v-for="(item, ix) in tab.newData" :key="ix")
            template(v-if="item.type == 1")
              .menu-image-text.menu-colorf(v-html="item.contents")

            .jc-between.box-sizing.pdy2(v-if="item.type == 2")
              .fc-w3.flex-1.box-sizing.pdl2.ai-center(style='border-left: 3px solid #409eff;') 联系方式
              .ff-rn.ai-center(@click="jumpTel(item)")
                img(src='static/images/vrtour/phone.png' alt='' style='height: 15px;')
                .menu-colorf.mgl1.menu-pointer {{item.contents}}

            .jc-between.box-sizing.pdy2(v-if="item.type == 3")
              .fc-w3.box-sizing.pdl2.ai-center.w50(style='border-left: 3px solid #409eff;') 地址
              .flex-1.ff-rn.jc-end(@click="jumpMap(item)")
                .mgb0.ff-rn
                  img(src='static/images/vrtour/dingwei.png' alt='' style='height: 15px;width: 10px;display: inline-block;')
                  .menu-colorf.mgl1.menu-pointer {{item.contents}}

            .menu-weixin(v-if="item.type == 4")
              .mgt2
                img(:src="item.contents" style="height: 120px;")
              .fc-w3.mgt2.mgb2.tac 微信二维码

            .menu-audio(v-if="item.type == 5")
              p.menu-color9.mgt2.mgb2 音频
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              .menu-audio-url.menu-center
                audio(ref="audioControl" :src="item.fullaudio", :autoplay="item.isPlay", loop, controls style="width: 100%;max-width: 500px;")
            .menu-video(v-if="item.type == 6")
              p.menu-color9.mgt2.mgb2 视频
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              .menu-video-url.menu-center
                video(
                  ref="videoWrap",
                  loop,
                  preload,
                  :autoplay="item.isPlay",
                  controls,
                  webkit-playsinline='true',
                  playsinline='true',
                  x5-playsinline="true",
                  :src="item.fullvideo",
                  style="background-color: #444;width: 100%;max-width: 800px;")

            .menu-url(v-if="item.type == 7")
              p.menu-color9.mgt2.mgb2 链接
              p
                van-icon.menu-colorf(name="gem-o")
                span.menu-colorf.mgl2.menu-pointer(@click="jumpUrl(item.contents)") {{item.contents}}
            .menu-360huanwu.w100p(v-if="item.type == 8")
              p.menu-color9.mgt2.mgb2 物品3D
              p.mgb2.menu-center.menu-colorf {{item.contents}}
              iframe.frame-360huanwu(frameborder="0", scrolling="yes", :src="item.previewurl", :style="`width: 100%;min-height: ${isPc ? '550px': '450px'};`")

    //- 多功能信息
    .menuscenic-mutil(v-else)
      .menu-text-html(v-for="(item, ix) in menusData" :key="ix")
        .menu-image-text.menu-colorf(v-if="item.type == 1" v-html="item.contents")

        .jc-between.box-sizing.pdy2(v-if="item.type == 2")
          .fc-w3.flex-1.box-sizing.pdl2.ai-center(style='border-left: 3px solid #409eff;') 联系方式
          .ff-rn.ai-center(@click="jumpTel(item)")
            img(src='static/images/vrtour/phone.png' alt='' style='height: 15px;')
            .menu-colorf.mgl1.menu-pointer {{item.contents}}

        .jc-between.box-sizing.pdy2(v-if="item.type == 3")
          .fc-w3.box-sizing.pdl2.ai-center.w50(style='border-left: 3px solid #409eff;') 地址
          .flex-1.ff-rn.jc-end(@click="jumpMap(item)")
            .mgb0.ff-rn
              img(src='static/images/vrtour/dingwei.png' alt='' style='height: 15px;width: 10px;display: inline-block;')
              .menu-colorf.mgl1.menu-pointer {{item.contents}}

        .menu-weixin(v-if="item.type == 4")
          .mgt2
            img(:src="item.contents" style="height: 120px;")
          .fc-w3.mgt2.mgb2.tac 微信二维码

        .menu-audio(v-if="item.type == 5")
          p.menu-color9.mgt2.mgb2 音频
          p.mgb2.menu-center.menu-colorf {{item.contents}}
          .menu-audio-url.menu-center
            audio(ref="audioControl" :src="item.fullaudio", :autoplay="item.isPlay", loop, controls style="width: 100%;max-width: 500px;")
        .menu-video(v-if="item.type == 6")
          p.menu-color9.mgt2.mgb2 视频
          p.mgb2.menu-center.menu-colorf {{item.contents}}
          .menu-video-url.menu-center
            video(
              ref="videoWrap",
              loop,
              preload,
              :autoplay="item.isPlay",
              controls,
              webkit-playsinline='true',
              playsinline='true',
              x5-playsinline="true",
              :src="item.fullvideo",
              style="background-color: #444;width: 100%;max-width: 800px;")

        .menu-url(v-if="item.type == 7")
          p.menu-color9.mgt2.mgb2 链接
          p
            van-icon.menu-colorf(name="gem-o")
            span.menu-colorf.mgl2.menu-pointer(@click="jumpUrl(item.contents)") {{item.contents}}
        .menu-360huanwu.w100p(v-if="item.type == 8")
          p.menu-color9.mgt2.mgb2 物品3D
          p.mgb2.menu-center.menu-colorf {{item.contents}}
          iframe.frame-360huanwu(frameborder="0", scrolling="yes", :src="item.previewurl", :style="`width: 100%;min-height: ${isPc ? '550px': '450px'};`")

    

</template>

<script>
import { sortId, isPc } from '@/utils'

export default {
  data() {
    this.isPc = isPc()
    return {
      urlApi: $globalconfig.URLS.API,
      logoImg: encodeURIComponent($globalconfig.LOGO),
      active: 0,
      dialogVisible: false,
      menusData: [],
      title: '',
      img: '',
      typeModel: 0,
      activeName: '0',
      tabData: [],
    }
  },
  mounted(){
    this.$vgo.on('dialog:mutil', item => {
      if (!item) return

      let contents = []
      if (item.biaoji == 1) {
        // 航拍模板菜单展示
        this.typeModel = 1
        this.tabData = item.data
      } else {
        this.typeModel = 0
        // 景点模板菜单展示
        contents = JSON.parse(item.data)
        if (contents.length > 0) {
          contents.sort(sortId)
        }
        this.menusData = contents

        // if (item.isIntro) {
        //   // 景点模板简介展示
        //   this.img = item.img
        //   this.title = item.name
        // }
      }
      this.dialogVisible = true
    })
  },
  methods: {
    // 跳转地图
    jumpMap(item) {
      let dataMap = `https://uri.amap.com/marker?position=${item.location_lng},${item.location_lat}&name=${item.contents}&radius=110&src=mypage&coordinate=gaode&callnative=0&key=b65d581a9e00d6952661f5e0056e3649`
      window.open(dataMap)
    },
    // 打电话
    jumpTel(item) {
      if (item.contents) {
        window.location.href = `tel:${item.contents}`
      }
    },
    // 跳转链接
    jumpUrl(val) {
      window.open(val)
    },
    close() {
      // 清除数据
      this.dialogVisible = false
      this.menusData = []
      this.title = ''
      this.img = ''
      this.typeModel = 0
      this.activeName = '0'
      this.tabData = []
    },
  }
}
</script>

<style lang="stylus">
$colorf = #fff
$color9 = #999

.menuscenic-dialog-contents
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  overflow hidden
  background-color rgba(0,0,0,0.8)
  z-index 999999
  height 100%
  .menuscenic-close
    position absolute
    right 20px
    top 10px
    z-index 103
    cursor pointer
  .menuscenic-tab
    overflow-y auto
    min-height 400px
    height 96%
    padding 20px
    .menuscenic-img
      img
        max-width 100%
    .menuscenic-title
      color #fff
      font-size 30px
      margin-top 10px
      margin-bottom 10px
    .menu-text-html
      padding 10px 0
      border-bottom 1px solid #999
      &:last-child
        border-bottom none
      .menu-image-text
        white-space pre-wrap
        word-break break-all
        line-height 24px
        p
          img
            max-width 100% !important
        img
          max-width 100% !important
  .menu-center
    text-align center
  .menu-colorf
    color $colorf
  .menu-color9
    color $color9
  .menu-pointer
    cursor pointer

  .el-tabs__header.is-top
    .el-tabs__item
      color #ffffff
      &.is-active
        color #409eff
      &:hover
        color #409eff
</style>